import React from 'react'
import PropTypes from 'prop-types';
import clsx from 'clsx';
import { makeStyles, useTheme } from '@material-ui/core/styles';
import { Grid, Typography, TextField, Button } from '@material-ui/core';
import { Icon } from 'components/atoms';
import validate from 'validate.js';
import { useSelector, useDispatch } from 'react-redux'
import { callPostNewsApi } from 'utils/networking';
import { useHistory } from "react-router-dom";

const useStyles = makeStyles(theme => ({
    root: {
        width: "100%",
        padding: "5% 30px"
    },
    typography: {
        textAlign: "left",
        fontFamily: "HurmeGeometricSans3-Black",
        fontSize: "36px",
        fontStyle: "normal",
        fontWeight: 700,
        lineHeight: "normal",
        textTransform: "uppercase",
        color: "#000",
        [theme.breakpoints.up('md')]: {
            fontSize: "48px",
        },
    },
    grid: {
        marginTop: "50px",
        [theme.breakpoints.up('md')]: {
            marginTop: "0",
        },
    },
    gridItem: {
        marginTop: "50px"
    },
    icon: {
        padding: "8px 12px",
        border: "1px solid #E2E2E2",
        borderRadius: "50%",
    },
    input: {
        borderBottom: "1px solid #E2E2E2",
        margin: "16px 0",
        "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
            border: "none",
        },
        "& .MuiOutlinedInput-notchedOutline": {
            border: "none",
        },
        "&:hover .MuiOutlinedInput-notchedOutline": {
            border: "none",
        },
        "& .MuiInputBase-input": {
            padding: "10px 0px",
        },
        "& .MuiFormHelperText-root": {
            marginLeft: "0",
        }
    },
    form: {
        marginTop: "50px"
    },
    button: {
        color: "#000",
        fontSize: "10px",
        padding: "12px 20px",
        border: "1px solid #9B9B9B",
        lineHeight: "18px",
        cursor: "pointer",
        width: "160px",
        background: "#fff",
        textAlign: "left"
    },
}));

const schema = {
    email: {
        presence: { allowEmpty: false, message: 'is required' },
        email: true,
        length: {
            maximum: 300,
        },
    },
    phone: {
        presence: { allowEmpty: false, message: 'is required' },
        length: {
            maximum: 128,
        },
    },
    message: {
        presence: { allowEmpty: false, message: 'is required' },
    },
};

const FindUs = () => {
    const classes = useStyles();
    const history = useHistory();
    const dispatch = useDispatch();
    const [formState, setFormState] = React.useState({
        isValid: false,
        values: {},
        touched: {},
        errors: {},
    });

    const profileData = useSelector((state) => state.auth.profileData)

    React.useEffect(() => {
        const errors = validate(formState.values, schema);

        setFormState(formState => ({
            ...formState,
            isValid: errors ? false : true,
            errors: errors || {},
        }));
    }, [formState.values]);

    const handleChange = event => {
        event.persist();
        setFormState(formState => ({
            ...formState,
            values: {
                ...formState.values,
                [event.target.name]:
                    event.target.type === 'checkbox'
                        ? event.target.checked
                        : event.target.value,
            },
            touched: {
                ...formState.touched,
                [event.target.name]: true,
            },
        }));
    };

    const hasError = field =>
        formState.touched[field] && formState.errors[field] ? true : false;

    const onSubmit = async (event) => {
        event.preventDefault();
        if (!profileData || !profileData.id) {
            history.push(`signin`);
            return;
        }
        callPostNewsApi('user/contact_us_v1', { ...formState.values, user_id: profileData.id }, dispatch, (data) => {
            // console.log(data);
            setFormState({
                isValid: false,
                values: {},
                touched: {},
                errors: {},
            })

        })
    };

    return (
        <div className={classes.root}>
            <Grid container justifyContent="space-around" className={classes.grid}>
                <Grid item container justifyContent='flex-start' alignItems='flex-start' direction="column" xs={12} md={4}>
                    <Typography className={clsx(classes.typography)}>where to find us?</Typography>

                    <Grid container className={classes.gridItem} >
                        <Grid item container justifyContent='flex-start' alignItems='center' xs={2} sm={1} md={2}>
                            <div className={clsx(classes.icon)}>
                                <Icon
                                    fontIconClass="fa fa-map-marker-alt"
                                    fontIconColor={"#7E53F9"}
                                />
                            </div>
                        </Grid>
                        <Grid item container justifyContent='center' alignItems='flex-start' xs={8} sm={6} lg={4}>
                            2972 Westheimer Rd. Santa Ana
                            info@la-studioweb.com
                            (702) 555-0122
                        </Grid>
                    </Grid>

                    <Grid container className={classes.gridItem}>
                        <Grid item container justifyContent='flex-start' alignItems='center' xs={2} sm={1} md={2}>
                            <div className={clsx(classes.icon)}>
                                <Icon
                                    fontIconClass="fa fa-map-marker-alt"
                                    fontIconColor={"#7E53F9"}
                                />
                            </div>
                        </Grid>
                        <Grid item container justifyContent='center' alignItems='flex-start' xs={8} sm={6} lg={4}>
                            4517 Washington Ave. Manchester
                            info@la-studioweb.com
                            (704) 555-0127
                        </Grid>
                    </Grid>

                </Grid>
                <Grid item container justifyContent='flex-start' alignItems='flex-start' direction="column" xs={12} md={4} className={classes.grid}>
                    <Typography className={clsx(classes.typography)}>drop us a line</Typography>
                    <form
                        onSubmit={onSubmit}
                        className={classes.form}
                    >
                        <Grid container spacing={2}>
                            <Grid item xs={12}>
                                <TextField
                                    placeholder="Email address"
                                    variant="outlined"
                                    size="medium"
                                    name="email"
                                    fullWidth
                                    helperText={
                                        hasError('email') ? formState.errors.email[0] : null
                                    }
                                    error={hasError('email')}
                                    onChange={handleChange}
                                    type="text"
                                    value={formState.values.email || ''}
                                    className={classes.input}
                                />
                            </Grid>
                            <Grid item xs={12}>
                                <TextField
                                    placeholder="Phone Number"
                                    variant="outlined"
                                    size="medium"
                                    name="phone"
                                    fullWidth
                                    helperText={hasError('phone') ? formState.errors.phone[0] : null}
                                    error={hasError('phone')}
                                    onChange={handleChange}
                                    value={formState.values.phone || ''}
                                    className={classes.input}
                                />
                            </Grid>
                            <Grid item xs={12}>
                                <TextField
                                    placeholder="Message"
                                    variant="outlined"
                                    name="message"
                                    fullWidth
                                    helperText={
                                        hasError('message') ? formState.errors.message[0] : null
                                    }
                                    error={hasError('message')}
                                    onChange={handleChange}
                                    value={formState.values.message || ''}
                                    className={classes.input}
                                />
                            </Grid>
                            <Grid item xs={12}>
                                {/* <Button
                                    size="large"
                                    variant="contained"
                                    type="submit"
                                    color="primary"
                                    disabled={!formState.isValid}
                                >
                                    send message
                                </Button> */}
                                <button type="submit" className={classes.button}>
                                    SEND MESSAGE</button>
                            </Grid>
                        </Grid>
                    </form>
                </Grid>
            </Grid>
        </div>
    )
}


FindUs.propTypes = {
    /**
     * External classes
     */
    className: PropTypes.string,
};


export default FindUs
